﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../../../Content/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../../Content/element-plus/index.css">
  <link rel="stylesheet" href="../../../Content/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../../../styles/vue-page-common.css">
  <script src="../../../Scripts/Array.prototype.flat.js"></script>
  <script src="../../../Scripts/ResizeObserver.js"></script>
  <script src="../../../Content/vue3/vue.global.js"></script>
  <script src="../../../Content/element-plus/index.full.min.js"></script>
  <script src="../../../Content/element-plus/icons-vue.js"></script>
  <script src="../../../Content/element-plus/zh-cn.min.js"></script>
  <script src="../../../Scripts/axios.min.js"></script>
  <script src="../../../Content/nprogress/nprogress.min.js"></script>
  <script src="../../../Scripts/dayjs.min.js"></script>
  <script src="../../../Scripts/axios.config.js"></script>
  <script src="../../../Scripts/crypto-js.min.js"></script>
  <script src="../../../Scripts/secret.js"></script>
  <title>班组长派工</title>
  <style>
    .header {
      color: #fff;
      height: 50px;
      display: flex;
      align-items: center;
      background-image: linear-gradient(to right, #1E9FFF 0%, #68e0cf 100%);
    }

    .el-form-item__label {
      font-weight: normal;
    }

    .header-text {
      font-size: 22px;
      margin-left: 10px;
      font-weight: bold;
    }

    .el-breadcrumb__inner,
    .el-breadcrumb__separator {
      font-size: 16px;
      color: #fff !important;
    }

    .card-header-icon {
      color: #1E9FFF;
      margin-right: 5px;
      font-size: 20px;
    }

    .card-header-text {
      color: #000;
      font-size: 20px;
      font-weight: bold;
    }

    .flush-btn {
      position: absolute;
      right: 0;
      top: 0;
    }

    .el-card__body,
    .el-main {
      padding: 2px;
    }

    .el-submenu__title {
      font-size: 16px;
      font-weight: bold;
    }

    .el-sub-menu__title {
      font-size: 20px;
      color: #1E9FFF;
      font-weight: bold;
    }

    .info-text {
      font-size: 16px;
      height: 36px;
      line-height: 36px;
      margin-left: 10px;
    }

    .info-text-label {
      font-weight: bold;
      padding-right: 10px;
    }

    .el-form--label-top .el-form-item__label {
      padding: 0;
    }

    .el-form-item {
      margin-bottom: 10px;
    }

    .el-tabs__item {
      font-size: 16px;
      font-weight: bold;
    }

    .item {
      display: inline-block;
      text-align: center;
      margin-right: 25px;
    }

    .item-image-container {
      width: 80px;
      height: 40px;
      /* border-radius: 50%; */
      /* border: 1px dashed #1E9FFF; */
      display: flex;
      justify-content: center;
      align-items: center;
      /* cursor: pointer; */
    }

    .item-text {
      font-weight: bold;
      font-size: 16px;
      color: #1E9FFF;
      margin-top: 5px;
    }

    .handle-container {
      border-radius: 4px;
      border: 1px solid #EBEEF5;
      background-image: linear-gradient(to right, #C4E6FF 0%, #fff 100%);
      margin-top: 10px;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }

    .item-icon {
      font-size: 35px;
      color: #1E9FFF;
      transition: all 1.5s;
      font-size: 30px;
    }

    .sub-menu-icon {
      font-size: 20px !important;
      transition: all 1.5s;
    }

    .sub-menu-icon:hover {
      transform: scale(1.3) rotate(360deg);
    }

    .item-icon:hover {
      transform: scale(1.3) rotate(360deg);
    }

    /* 覆盖菜单项样式 */
    .el-menu-item {
      padding-left: 20px !important;
    }

    .el-menu-item.is-active {
      font-weight: bold;
      color: #1E9FFF;
      border: 1px dashed #1E9FFF;
      border-radius: 10px;
      font-size: 16px;
    }

    /* 待报工 */
    #unReport .el-menu-item.is-active {
      color: #67C23A;
      border: 1px dashed #67C23A;
    }

    /* 待检验 */
    #unCheck .el-menu-item.is-active {
      color: #F56C6C;
      border: 1px dashed #F56C6C;
    }

    .el-tree-node__content {
      height: 30px !important;
    }

    .el-tree-node__content:hover {
      font-weight: bold;
      color: #409EFF;
    }

    /* 徽标 */
    .el-badge__content.is-fixed {
      top: 5px;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <el-watermark :content="'RS031'"></el-watermark>
    <!-- 头部标题区域 -->
    <el-row class="header">
      <el-col :span="6">
        <div style="display: flex;align-items: center;position: relative;">
          <el-icon style="font-size: 22px;margin-left: 10px;">
            <home-filled />
          </el-icon>
          <span style="font-size: 20px;margin-left: 5px;font-weight: bold;">中国航发黎阳-制造执行系统</span>
        </div>
      </el-col>
      <el-col :span="14">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>{{userInfo.factoryname}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{userInfo.workcentername}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{userInfo.teamname ? userInfo.teamname : '--'}}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="4" style="text-align: right;">
        <span style="margin-right:20px;">{{currentTime}}</span>
      </el-col>
    </el-row>

    <!-- 中间部分 -->
    <el-row style="margin:10px 5px;">
      <!-- 右侧 -->
      <el-col :span="24">
        <!-- 生产报工区域 -->
        <el-card class="box-card">
          <template #header>
            <div style="display: flex;align-items: center;">
              <el-icon class="card-header-icon">
                <video-play />
              </el-icon>
              <span class="card-header-text">班组长派工</span>
            </div>
          </template>
          <div style="padding: 10px;">
            <!-- 批次信息 -->
            <el-form :inline="true" :model="formData" :label-position="'top'">
              <el-form-item label="扫描任务单">
                <el-input v-model="formData.ContainerNo" style="width: 140px;" clearable></el-input>
              </el-form-item>
              <el-form-item label="订单号">
                <el-input v-model="formData.MfgOrderName" style="width: 140px;" clearable></el-input>
              </el-form-item>

              <el-form-item label="发动机号(起)">
                <el-input v-model="formData.MachineStart" style="width: 120px;" clearable></el-input>
              </el-form-item>

              <el-form-item label="发动机号(止)">
                <el-input style="width: 120px;" v-model="formData.MachineEnd" clearable></el-input>
              </el-form-item>
              <el-form-item label="件号">
                <el-input v-model="formData.ProductName" style="width: 140px;" clearable></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formData.DispatchStatus" style="width: 140px;" clearable>
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="未派工" value="1"></el-option>
                  <el-option label="已派工" value="2"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="计划开始/结束日期">
                <el-date-picker v-model="formData.daterange" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" style="width:250px" />
              </el-form-item> -->
              <el-form-item label=" ">
                <el-button type="primary" style="margin-top: 20px;" @click="queryDispatchData">查询</el-button>
                <el-button plain style="margin-top: 20px;" @click="qureyReset">重置</el-button>
              </el-form-item>
            </el-form>

            <el-scrollbar :height="inputHeight+125">
              <!-- 任务单单信息 -->
              <el-tabs v-model="tabfirst">
                <el-tab-pane label="任务单信息" name="first" style="width: 100%;">
                  <el-table border style="width: 100%" :data="containerList" :height="tableHeight-190"
                    ref="containerTableRef" @row-click="selectContainerRow" highlight-current-row>
                    <el-table-column type="index" width="40"></el-table-column>
                    <el-table-column prop="MACHINENAME" label="发动机号" width="180"></el-table-column>
                    <el-table-column prop="TOGETHERFLAG" label="任务单号" width="180"></el-table-column>
                    <el-table-column prop="PRODUCTDESC" label="件号名称" width="180"></el-table-column>
                    <el-table-column prop="WORKFLOWDESC" label="工艺路线名称" width="180"></el-table-column>
                    <el-table-column prop="WORKFLOWNAME" label="工艺路线信息" width="180"></el-table-column>
                    <el-table-column prop="MACHINESTEPNAME" label="阶段" width="180"></el-table-column>
                    <el-table-column prop="SHIFTNAME" label="班" width="180"></el-table-column>
                    <el-table-column prop="PLANNEDSTARTDATE" label="计划开始时间" width="180" :formatter="dateFormatter">
                    </el-table-column>
                    <el-table-column prop="PLANNEDCOMPLETIONDATE" label="计划结束时间" width="180" :formatter="dateFormatter">
                    </el-table-column>
                  </el-table>
                  <el-pagination style="float: right;" v-model:current-page="main.currentPage"
                    v-model:page-size="main.pageSize" :page-sizes="[100, 200, 300, 400]" :small="small"
                    layout="total, sizes, prev, pager, next, jumper" :total="main.Total"
                    @size-change="queryDispatchData" @current-change="queryDispatchData" />
                </el-tab-pane>
              </el-tabs>
              <el-row>
                <el-col :span="11">
                  <!-- 工序信息 -->
                  <el-tabs v-model="tabfirst">
                    <el-tab-pane label="工序信息" name="first" style="width: 100%;">
                      <el-table border style="width: 100%" :data="specList" :height="312" ref="specTableRef"
                        @selection-change="selectSpecChange">
                        <el-table-column type="selection" width="40"></el-table-column>
                        <el-table-column prop="OPDESC" label="工序" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="SPECNO" label="工序号" width="80"></el-table-column>
                        <el-table-column prop="ISLASTSTEP" label="是否末序" width="80"></el-table-column>
                        <el-table-column prop="ISKEY" label="是否关键序" width="90"></el-table-column>
                        <el-table-column prop="WORKCENTER" label="并行工序组" width="90"></el-table-column>
                        <el-table-column prop="TEAMNAME" label="责任班组" width="90"></el-table-column>
                        <el-table-column prop="DISPATCHSTATUS" label="派工状态" width="80"></el-table-column>
                        <el-table-column prop="PLANNEDSTARTDATE" label="计划开始时间" width="170" :formatter="dateFormatter">
                        </el-table-column>
                        <el-table-column prop="PLANNEDFINISHDATE" label="计划结束时间" width="170" :formatter="dateFormatter">
                        </el-table-column>
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                </el-col>
                <!-- 工步信息 -->
                <el-col :span="8">
                  <el-tabs v-model="tabfirst">
                    <el-tab-pane label="工步信息" name="first" style="width: 100%;">
                      <el-table border style="width: 100%" :data="stepList" :height="312" ref="stepTableRef"
                        @row-click="selectStepRow" highlight-current-row>
                        <el-table-column type="selection" width="40"></el-table-column>
                        <el-table-column prop="WORKFLOWSTEPNAME" label="工序" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="STEPINFODESC" label="工步" width="100" show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column prop="STEPNO" label="工步序号" width="80"></el-table-column>
                        <el-table-column prop="SPECTYPENAME" label="工步类型" width="100"></el-table-column>
                        <el-table-column prop="DISPATCHSTATUS" label="派工状态" width="100"></el-table-column>
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                </el-col>
                <!-- 人员信息 -->
                <el-col :span="5">
                  <el-tabs v-model="tabfirst">
                    <el-tab-pane label="人员信息" name="first" style="width: 100%;">
                      <el-form label-position="top" :inline="true" style="padding-left: 5px;">
                        <el-form-item label="组">
                          <el-select style="width: 130px;" v-model="teamWrok.teamid" @change="teamSelectChange"
                            clearable>
                            <el-option v-for="item in teamSelectList" :key="item.TEAMID" :label="item.TEAMNAME"
                              :value="item.TEAMID">
                            </el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="员工">
                          <el-select style="width: 120px;" v-model="teamWrok.workid" clearable>
                            <el-option v-for="item in workSelectList" :key="item.EMPLOYEEID" :label="item.FULLNAME"
                              :value="item.EMPLOYEEID">
                            </el-option>
                          </el-select>
                          <el-button type="primary" @click="addOtherTeamWork">添加</el-button>
                        </el-form-item>
                        <el-form-item>

                        </el-form-item>
                      </el-form>
                      <el-table border style="width: 100%" :data="employeeList" :height="230" ref="employeeListRef">
                        <el-table-column type="selection" width="40"></el-table-column>
                        <el-table-column prop="TEAMNAME" label="班组" width="150"></el-table-column>
                        <el-table-column prop="FULLNAME" label="员工" width="150"></el-table-column>
                      </el-table>
                    </el-tab-pane>
                  </el-tabs>
                </el-col>
              </el-row>
            </el-scrollbar>
          </div>
        </el-card>
        <!-- 按钮区域 -->
        <div class="handle-container">
          <el-row>
            <el-col :span="6.5">
              <el-form label-position="top" :inline="true">
                <el-form-item label="计划开工日期">
                  <el-date-picker v-model="dispatchObj.startDate"></el-date-picker>
                </el-form-item>
                <el-form-item label="计划完工日期">
                  <el-date-picker v-model="dispatchObj.endDate"></el-date-picker>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="16">
              <div class="item">
                <div class="item-image-container">
                  <el-link :underline="false" @click="handleShiftTeamDispatch">
                    <el-icon class="item-icon">
                      <refresh-left />
                    </el-icon>
                  </el-link>
                </div>
                <div class="item-text">派工</div>
              </div>
              <div class="item">
                <div class="item-image-container">
                  <el-link :underline="false" @click="handleLookProgress">
                    <el-icon class="item-icon">
                      <Odometer />
                    </el-icon>
                  </el-link>
                </div>
                <div class="item-text">查看准备进度</div>
              </div>
              <div class="item">
                <div class="item-image-container">
                  <el-link :underline="false" @click="handleDocumentViewClick">
                    <el-icon class="item-icon">
                      <Document />
                    </el-icon>
                  </el-link>
                </div>
                <div class="item-text">工艺查看</div>
            </el-col>
          </el-row>
        </div>


    </el-row>
    <!-- 准备进度查看/收料确认对话框 -->
    <el-dialog v-model="lookProgress.lookProgressDialogVisible" :title="lookProgress.isLook===true?'准备进度查看':'收料确认'"
      width="50%" :draggable="true" align-center>
      <el-scrollbar :height="inputHeight+125">
        <el-tabs v-model="tabfirst">
          <el-tab-pane label="工序信息" name="first" style="width: 100%;">
            <el-descriptions class="margin-top" :column="4" :size="small" border>
              <el-descriptions-item label="任务单号">
                {{lookProgress.containerspecInfo.CONTAINERNO}}
              </el-descriptions-item>
              <el-descriptions-item label="发动机号">
                {{lookProgress.containerspecInfo.MACHINENAME}}
              </el-descriptions-item>
              <el-descriptions-item label="订单号">
                {{lookProgress.containerspecInfo.MFGORDERNAME}}
              </el-descriptions-item>
              <el-descriptions-item label="件号名称">
                {{lookProgress.containerspecInfo.PRODUCTDESC}}
              </el-descriptions-item>
              <el-descriptions-item label="阶段">
                {{lookProgress.containerspecInfo.MACHINESTEPNAME}}
              </el-descriptions-item>
              <el-descriptions-item label="工序">
                {{lookProgress.containerspecInfo.WORKFLOWSTEPNAME}}
              </el-descriptions-item>
              <el-descriptions-item label="开始计划时间">
                {{lookProgress.containerspecInfo.PLANNEDSTARTDATE}}
              </el-descriptions-item>
              <el-descriptions-item label="开始完成时间">
                {{lookProgress.containerspecInfo.PLANNEDCOMPLETIONDATE}}
              </el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="tabfirst">
          <el-tab-pane label="去封报工结果" name="first" style="width: 100%;">
            <el-table border style="width: 100%" :data="lookProgress.bigList" ref="bigLookListRef">
              <el-table-column prop="PRODUCTNAME" label="大件号" width="110"></el-table-column>
              <el-table-column prop="PRODUCTDESC" label="件号名称" width="150"></el-table-column>
              <el-table-column prop="FIRSTASSEMBLEQTY" label="单台数量" width="110"></el-table-column>
              <el-table-column prop="PRODUCTBATCHNO" label="批次号" width="100"></el-table-column>
              <template v-if="lookProgress.isLook">
                <el-table-column prop="TOTALCOLLECTQTY" label="已报数量" width="110"></el-table-column>
                <el-table-column prop="OPDESC4" label="未报数量" width="80">
                  <template #default="scope">
                    {{scope.row.FIRSTASSEMBLEQTY-scope.row.TOTALCOLLECTQTY
                    <0?0:scope.row.FIRSTASSEMBLEQTY-scope.row.TOTALCOLLECTQTY}} </template>
                </el-table-column>
                <el-table-column prop="OPDESC4" label="完成进度">
                  <template #default="scope">
                    <el-tag :type="danger">
                      {{scope.row.TOTALCOLLECTQTY/scope.row.FIRSTASSEMBLEQTY*100>100?'100%':scope.row.TOTALCOLLECTQTY/scope.row.FIRSTASSEMBLEQTY*100+'%'}}
                    </el-tag>
                  </template>
                </el-table-column>
              </template>
              <template v-if="!lookProgress.isLook">
                <el-table-column prop="SENDQTY" label="本次配送数量" width="130"></el-table-column>
                <el-table-column prop="EDITORQTY" label="未配送数量" width="130"> </el-table-column>
                <el-table-column prop="NNORECEIVEQTY" label="本次收料数量">
                  <template #default="scope">
                    <el-input v-model="scope.row.NNORECEIVEQTY" type="number" min="0"
                      :disabled="!Number(scope.row.NNORECEIVEQTY)>0"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="NORECEIVEQTY" label="未收料数量" width="130"></el-table-column>
              </template>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="tabfirst">
          <el-tab-pane label="集件报工结果" name="first" style="width: 100%;">
            <el-table border style="width: 100%" :data="lookProgress.smallList" ref="smallLookListRef">
              <el-table-column prop="PRODUCTNAME" label="小件号" width="110"></el-table-column>
              <el-table-column prop="PRODUCTDESC" label="件号名称" width="150"></el-table-column>
              <el-table-column prop="FIRSTASSEMBLEQTY" label="单台数量" width="110"></el-table-column>
              <el-table-column prop="PRODUCTBATCHNO" label="批次号" width="100"></el-table-column>
              <template v-if="lookProgress.isLook">
                <el-table-column prop="TOTALCOLLECTQTY" label="已报数量" width="110"></el-table-column>
                <el-table-column prop="OPDESC4" label="未报数量" width="80">
                  <template #default="scope">
                    {{scope.row.FIRSTASSEMBLEQTY-scope.row.TOTALCOLLECTQTY
                    <0?0:scope.row.FIRSTASSEMBLEQTY-scope.row.TOTALCOLLECTQTY}} </template>
                </el-table-column>
                </el-table-column>
                <el-table-column prop="OPDESC4" label="完成进度">
                  <template #default="scope">
                    <el-tag :type="danger">
                      {{scope.row.TOTALCOLLECTQTY/scope.row.FIRSTASSEMBLEQTY*100>100?'100%':scope.row.TOTALCOLLECTQTY/scope.row.FIRSTASSEMBLEQTY*100+'%'}}
                    </el-tag>
                  </template>
                </el-table-column>
              </template>
              <template v-if="!lookProgress.isLook">
                <el-table-column prop="SENDQTY" label="本次配送数量" width="130"></el-table-column>
                <el-table-column prop="EDITORQTY" label="未配送数量" width="130"> </el-table-column>
                <el-table-column prop="NNORECEIVEQTY" label="本次收料数量">
                  <template #default="scope">
                    <el-input v-model="scope.row.NNORECEIVEQTY" type="number" min="0"
                      :disabled="!Number(scope.row.NNORECEIVEQTY)>0"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="NORECEIVEQTY" label="未收料数量" width="130"></el-table-column>
              </template>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="tabfirst">
          <el-tab-pane label="工装工具准备结果" name="first" style="width: 100%;">
            <el-table border style="width: 100%" :data="lookProgress.toolList" ref="toolLookListRef">
              <el-table-column prop="TOOLNAME" label="工装工具编号" width="110" v-if="lookProgress.isLook"></el-table-column>
              <el-table-column prop="DESCRIPTION" label="工装工具名称" width="150"></el-table-column>
              <el-table-column :prop="lookProgress.isLook?'DRAWINGNO':'NAME'" label="工装工具图号" width="110">
              </el-table-column>
              <el-table-column prop="SPECIFICATION" label="型号规格" width="100"></el-table-column>
              <el-table-column :prop="lookProgress.isLook?'TOOLTYPE':'RESOURCETYPENAME'" label="工装工具类型" width="110">
              </el-table-column>
              <el-table-column prop="QTY" label="需求数量" width="80"></el-table-column>
              <template v-if="lookProgress.isLook">
                <el-table-column prop="PREPAREQTY" label="已准备数量" width="100"></el-table-column>
                <el-table-column prop="NOPREPAREQTY" label="未准备数量" width="100"></el-table-column>
                <el-table-column prop="OPDESC5" label="完成进度">
                  <template #default="scope">
                    <el-tag :type="danger">
                      {{scope.row.PREPAREQTY/scope.row.QTY*100>100?'100%':scope.row.PREPAREQTY/scope.row.QTY*100+'%'}}
                    </el-tag>
                  </template>
                </el-table-column>
              </template>
              <template v-if="!lookProgress.isLook">
                <el-table-column prop="CONFIRMQTY" label="本次配送数量" width="110"></el-table-column>
                <el-table-column prop="NOCONFIRMQTY" label="未配送数量" width="100">
                  <template #default="scope">
                    {{scope.row.QTY-scope.row.CONFIRMQTY}}
                  </template>
                </el-table-column>
                <el-table-column prop="NNORECEIVEQTY" label="本次收料数量">
                  <template #default="scope">
                    <el-input v-model="scope.row.NNORECEIVEQTY" type="number" min="0"
                      :disabled="!Number(scope.row.NNORECEIVEQTY)>0"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="NNORECEIVEQTY1" label="未收料数量" width="100">
                  <template #default="scope">
                    {{scope.row.CONFIRMQTY-scope.row.RECEIVEQTY}}
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <el-tabs v-model="tabfirst">
          <el-tab-pane label="辅材准备结果" name="first" style="width: 100%;">
            <el-table border style="width: 100%" :data="lookProgress.materialList" ref="materialLookListRef">
              <el-table-column :prop="lookProgress.isLook?'AUXMATERIALNAME':'NAME'" label="物料编码" width="110">
              </el-table-column>
              <el-table-column prop="DESCRIPTION" label="物料描述" width="150"></el-table-column>
              <el-table-column prop="SPECIFICATION" label="型号规格" width="110"></el-table-column>
              <el-table-column prop="RESOURCETYPENAME" label="材料类型" width="100"></el-table-column>
              <el-table-column prop="QTY" label="需求数量" width="100"></el-table-column>
              <template v-if="lookProgress.isLook">
                <el-table-column prop="PREPAREQTY" label="已准备数量" width="110"></el-table-column>
                <el-table-column prop="NOPREPAREQTY" label="未准备数量" width="110"></el-table-column>
                <el-table-column prop="OPDESC4" label="完成进度">
                  <template #default="scope">
                    <el-tag :type="danger">
                      {{scope.row.PREPAREQTY/scope.row.QTY*100>100?'100%':scope.row.PREPAREQTY/scope.row.QTY*100+'%'}}
                    </el-tag>
                  </template>
                </el-table-column>
            </el-table>
          </el-tab-pane>
          </template>
          <template v-if="!lookProgress.isLook">
            <el-table-column prop="CONFIRMQTY" label="本次配送数量" width="110"></el-table-column>
            <el-table-column prop="NOCONFIRMQTY" label="未配送数量" width="100">
              <template #default="scope">
                {{scope.row.QTY-scope.row.CONFIRMQTY}}
              </template>
            </el-table-column>
            <el-table-column prop="NNORECEIVEQTY" label="本次收料数量">
              <template #default="scope">
                <el-input v-model="scope.row.NNORECEIVEQTY" type="number" min="0"
                  :disabled="!Number(scope.row.NNORECEIVEQTY)>0"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="NNORECEIVEQTY1" label="未收料数量" width="100">
              <template #default="scope">
                {{scope.row.CONFIRMQTY-scope.row.RECEIVEQTY}}
              </template>
            </el-table-column>
          </template>
        </el-tabs>
        <!-- <el-tabs v-model="tabfirst">
          <el-tab-pane label="设备准备结果" name="first" style="width: 100%;">
            <el-table border style="width: 100%" :data="lookProgress.equList">
              <el-table-column prop="PRODUCTNAME" label="设备编码" width="110"></el-table-column>
              <el-table-column prop="PRODUCTDESC" label="设备名称" width="150"></el-table-column>
              <el-table-column prop="FIRSTASSEMBLEQTY" label="型号规格" width="110"></el-table-column>
              <el-table-column prop="PRODUCTBATCHNO" label="设备类型" width="100"></el-table-column>
              <el-table-column prop="TOTALCOLLECTQTY" label="状态" width="80"></el-table-column>
              <el-table-column prop="OPDESC4" label="设备编号" width="80"></el-table-column>
              <el-table-column prop="OPDESC4" label="设备状态"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs> -->
      </el-scrollbar>
      <template #footer>
        <span class="dialog-footer">
          <template v-if="!lookProgress.isLook">
            <el-button type="primary" @click="handleReceiveBigSmall(0)">去封收料确认</el-button>
            <el-button type="success" @click="handleReceiveBigSmall(1)">集件收料确认</el-button>
            <el-button type="warning" @click="handleRTReceive(1)">工装工具收料确认</el-button>
            <el-button type="danger" @click="handleRTReceive(2)">辅材收料确认</el-button>
          </template>
          <el-button @click="lookProgress.lookProgressDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 文档查看对话框 -->
    <el-dialog v-model="documentViewDialogVisible" title="文档查看" width="60%" :draggable="true" align-center>
      <el-row :gutter="10">
        <el-col :span="14">
          <el-scrollbar height="400">
            <el-card>
              <template #header>
                <div style="display: flex;align-items: center;position: relative;">
                  <el-icon class="card-header-icon" style="font-size: 20px;">
                    <info-filled />
                  </el-icon>
                  <span class="card-header-text">工艺信息</span>
                </div>
              </template>
              <el-tree :data="treeData" node-key="id" :default-expand-all="true" :expand-on-click-node="false"
                @node-click="handleNodeClick">
                <template #default="scope">
                  <el-icon v-if="scope.data.type !== 'spec'" style="color:orange;margin-right: 10px;">
                    <Folder />
                  </el-icon>
                  <el-icon v-else style="margin-right: 10px;">
                    <Grid />
                  </el-icon>
                  {{scope.data.label}}
                </template>
              </el-tree>
            </el-card>
          </el-scrollbar>
        </el-col>
        <el-col :span="10">
          <el-card>
            <template #header>
              <div style="display: flex;align-items: center;position: relative;">
                <el-icon class="card-header-icon" style="font-size: 20px;">
                  <List />
                </el-icon>
                <span class="card-header-text">文档清单</span>
              </div>
            </template>
            <el-table :data="documentList" stripe border>
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column label="文档名称" prop="documentname" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="操作" prop="filepath" width="120">
                <template #default="scope">
                  <el-link type="primary" @click="handleOpenDocumentClick(scope.row.filepath)">查看文档</el-link>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="documentViewDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>

  </div>

  <script type="module">
    const { createApp, reactive, ref, toRef, toRefs, onMounted, watch } = Vue
    const { ElMessage, ElLoading, ElMessageBox, ElNotification } = ElementPlus
    import { useFetch } from '../../../Scripts/hooks/useFetch.js';
    import { commonFetch } from '../../../Scripts/ZsJs/commonFetch.js';
    import { splitDate } from '../../../Scripts/utils/format.js';//时间截取
    import { usePageHeightSet } from '../../../Scripts/hooks/workreport/usePageHeightSet.js';//页面高度计算
    import { useGetUserInfo } from '../../../Scripts/hooks/useGetUserInfo.js';//获取账号信息
    import { getParams } from '../../../Scripts/utils/common.js';//获取页面参数
    import { useDocumentView } from '../../../Scripts/hooks/workreport/useDocumentView.js';//文档查看

    const App = {
      setup() {
        const baseAPI = '../../../Ashx/ContainerStepWorkReportVue3PageHandler.ashx';
        const ZSbaseAPI = '../../../Ashx/ZSHandler/ZSContainerStepWorkReportHandler.ashx';
        const ZSdispatchAPI = '../../../Ashx/ZSHandler/ZSContainerShiftTeamDispatchHandler.ashx';
        const FetchCommonUrl = '../../../Ashx/FetchCommonHandler.ashx';
        const lookProgressUrl = '../../../Ashx/ZsHandler/ZSIssueCollectMaterialHandler.ashx'//准备进度查看


        let currentTime = ref('');// 当前时间

        // 页面布局高度配置
        const { clientHeight, inputHeight, tableHeight } = usePageHeightSet();
        const { userInfo, getUserInfo } = useGetUserInfo();

        let tabfirst = ref('first');// 选项卡当前选中索引
        const containerList = ref([]);
        const formData = reactive({
          ContainerNo: '',
          MachineStart: '',
          MachineEnd: '',
          BeginDate: '',
          EndDate: '',
          MfgOrderName: '',
          ProductName: '',
          DispatchStatus: '0'
        });
        const currentContainerRow = ref(null);
        const specTableRef = ref(null)
        const stepTableRef = ref(null)
        const specList = ref([]);
        const containerTableRef = ref(null)
        const stepList = ref([])
        const teamWrok = reactive({
          teamid: '',
          workid: ''
        })
        const teamSelectList = ref([])
        const workSelectList = ref([])
        const employeeList = ref([])
        const employeeListRef = ref(null)

        let currentSelectContainer = {}; // 任务单信息单选的批次

        //准备进度查看结果集
        let lookProgress = reactive({
          lookProgressDialogVisible: false,
          isLook: true,//true：进度看板，false:收料确认
          containerspecInfo: null,
          bigList: [],
          smallList: [],
          toolList: [],
          materialList: [],
          equList: []
        })

        // 文档查看
        const {
          documentViewDialogVisible,
          treeData,//文档查看Tree数据
          documentList,//文档查看文件清单
          getDocumentViewTreeData,
          getDocumentList,
          downloadFile,
        } = useDocumentView();

        const main = reactive({
          currentPage: 1,
          pageSize: 20,
          Total: 0,
        });
        //准备进度查看结果集
        let sendDeliveryApply = reactive({
          sendDeliveryApplyDialogVisible: false,
          bigsmallList: [],
          toolList: [],
          materialList: [],

        })
        const bigsmallListRef = ref(null)
        const toolListRef = ref(null)
        const materialListRef = ref(null)

        const bigLookListRef = ref(null)//去封table--ref
        const smallLookListRef = ref(null)//集件table--ref
        const toolLookListRef = ref(null)//工装工具table--ref
        const materialLookListRef = ref(null)//辅材table--ref

        const dispatchObj = reactive({
          startDate: null,
          endDate: null
        });



        //查询报工数据---------------------------
        async function queryDispatchData() {
          const requestData = Object.assign({}, formData, main);
          const config = {
            url: `${ZSdispatchAPI}?action=GetContainerShiftTeamDispatch&data=${JSON.stringify(requestData)}`,
          };

          const { tdata, total } = await commonFetch(config);
          containerList.value = tdata.value === null ? [] : Array.from(tdata.value);
          main.Total = Number(total.value)
          specList.value = [];
          currentSelectContainer = {}
        }
        //查询工序信息---------------------------------
        async function selectContainerRow(row, column, event) {
          const config = {
            url: `${ZSdispatchAPI}?action=GetWorkflowStep&data=${JSON.stringify(row)}`,
          };

          const { tdata } = await commonFetch(config);
          specList.value = tdata.value === null ? [] : Array.from(tdata.value);
          currentContainerRow.value = row//.CONTAINERID
          currentSelectContainer = { productid: row.PRODUCTID, workflowid: row.WORKFLOWID }
          specTableRef.value.toggleAllSelection();//默认全选
          dispatchObj.startDate = row.PLANNEDSTARTDATE
          dispatchObj.endDate = row.PLANNEDCOMPLETIONDATE
        }
        //查询工步信息-----------------------------------
        async function selectSpecChange(val) {
          employeeList.value = []
          if (val.length === 0) { stepList.value = []; return; }
          let specIDs = [];
          val.map(item => {
            specIDs.push(item.WORKFLOWSTEPID);
          });
          const config = {
            url: `${ZSdispatchAPI}?action=GetStepInfo&data=${specIDs.join(',')}&ContainerID=${currentContainerRow.value.CONTAINERID}`,
          };

          const { tdata } = await commonFetch(config);
          stepList.value = tdata.value === null ? [] : Array.from(tdata.value);
          stepTableRef.value.toggleAllSelection();//默认全选
        }
        //重置
        async function qureyReset() {
          formData.ContainerNo = '',
            formData.MachineStart = '',
            formData.MachineEnd = '',
            formData.BeginDate = '',
            formData.EndDate = '',
            formData.MfgOrderName = '',
            formData.ProductName = '',
            formData.DispatchStatus = '0'
          await queryDispatchData()
        }
        //组选择变化时,查询员工列表信息
        async function teamSelectChange(val) {
          teamWrok.workid = ''
          workSelectList.value = []
          const config = {
            url: `${ZSdispatchAPI}?action=GetWorkByTeamId&teamID=${val}`,
          };

          const { tdata } = await commonFetch(config);
          workSelectList.value = tdata.value === null ? [] : Array.from(tdata.value);
        }
        //添加员工信息
        async function addOtherTeamWork() {
          if (teamWrok.workid === '' || teamWrok.workid === undefined) { return; }
          let isExist = employeeList.value.some(item => item.EMPLOYEEID === teamWrok.workid)
          if (isExist) { return ElMessage.error('该员工信息已存在表格中'); }
          let teams = teamSelectList.value.filter(item => item.TEAMID === teamWrok.teamid);
          let works = workSelectList.value.filter(item => item.EMPLOYEEID === teamWrok.workid);
          employeeList.value.push(Object.assign({}, teams[0], works[0]));
        }


        // 日期字符串截取
        function dateFormatter(row, column, cellValue, index) {
          return cellValue && cellValue.includes('T') ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : cellValue;
        }
        //【派工】按钮方法
        async function handleShiftTeamDispatch() {
          const rows = stepTableRef.value.getSelectionRows();
          if (rows.length === 0) {
            return ElMessage.error('请选择需要派工的工序或工步信息再进行操作');
          }
          if (dispatchObj.startDate === null || dispatchObj.endDate === null) {
            return ElMessage.error('请选择时间');
          }
          var formData = new FormData();
          formData.append("container", JSON.stringify(currentContainerRow.value));
          formData.append("StepInfo", JSON.stringify(rows))
          formData.append("Workers", JSON.stringify(employeeListRef.value.getSelectionRows()))
          formData.append("dispatch", JSON.stringify(dispatchObj))
          const config = {
            url: `${ZSdispatchAPI}?action=SaveStepDispatch`,
            data: formData
          };
          const { Result, Message } = await commonFetch(config);
          if (Result) {
            ElMessage.success(Message)
            await selectContainerRow(currentContainerRow.value, null, null)
          }
        }
        //派工人员信息获取
        async function selectStepRow(row, column, event) {
          var formData = new FormData();
          formData.append("container", JSON.stringify(currentContainerRow.value));
          formData.append("StepInfo", JSON.stringify([row]))
          const config = {
            url: `${ZSdispatchAPI}?action=GetStepDispatchWorker`,
            data: formData
          };
          const { tdata } = await commonFetch(config);
          console.info(tdata);
          employeeListRef.value.clearSelection()
          tdata.value.forEach(item => {
            let isExist = employeeList.value.some(itemm => itemm.EMPLOYEEID === item.WORKERID)
            let row = Object.assign({}, { TEAMID: item.TEAMID, TEAMNAME: item.TEAMNAME, EMPLOYEEID: item.WORKERID, FULLNAME: item.WORKERNAME })
            if (!isExist) {
              employeeList.value.push(row);
            }
            console.info(employeeListRef.value)
            let srow = employeeList.value.filter(itemm => itemm.EMPLOYEEID === row.EMPLOYEEID)[0]
            employeeListRef.value.toggleRowSelection(srow, undefined)
          });
        }

        // 1.【查看准备进度】按钮方法
        async function handleLookProgress() {
          const rows = specTableRef.value.getSelectionRows();
          if (rows.length != 1) {
            return ElMessage.error('请勾选一条工序信息再进行操作');
          }
          lookProgress.containerspecInfo = currentContainerRow
          lookProgress.containerspecInfo.WORKFLOWSTEPNAME = rows[0].WORKFLOWSTEPNAME
          lookProgress.lookProgressDialogVisible = true;
          lookProgress.isLook = true;
          let data = { id: rows[0].WORKFLOWSTEPID, containerno: currentContainerRow.value.CONTAINERNO, ContainerID: currentContainerRow.value.CONTAINERID, mfgorderid: currentContainerRow.value.MFGORDERID, type: '' }
          const config = {
            url: `${lookProgressUrl}?action=GetProgressData&id=${data.id}&containerno=${data.containerno}&ContainerID=${data.ContainerID}&type=&mfgorderid=${data.mfgorderid}`,
          };

          const { tdata, sdata, rdata, total, Message, Result } = await commonFetch(config);
          lookProgress.containerspecInfo = currentContainerRow
          lookProgress.bigList = sdata.value.bigTable
          lookProgress.smallList = sdata.value.smallTable
          lookProgress.toolList = sdata.value.toolTable
          lookProgress.materialList = sdata.value.auxMaterialTable
        }

        // 2.【工艺查看】按钮方法
        async function handleDocumentViewClick() {
          getDocumentViewTreeData({ currentSelectContainer, baseAPI });
        }

        // 2-1.【工艺查看】- 文档查看节点点击，查询工艺下的文档信息
        async function handleNodeClick(node) {
          const { id, type } = node;
          await getDocumentList({ url: `${baseAPI}`, method: 'getDocumentList', id, nodeType: type });
        }

        // 2-2.【工艺查看】- 打开文档
        async function handleOpenDocumentClick(filepath) {
          await downloadFile({ url: `${baseAPI}`, method: 'getDownloadUrl', filepath });
        }




        // 页面声明周期钩子
        onMounted(async () => {

          let incrementNumber = () => {
            setTimeout(incrementNumber, 3000);
            currentTime.value = dayjs().format('YYYY年MM月DD日  HH:mm');
          }

          setTimeout(incrementNumber, 0);

          // 查询当前用户信息，绑定给响应式变量 userInfo
          const uid = Decrypt(getParams('uid'));
          await getUserInfo({ url: `${FetchCommonUrl}`, method: 'getUserInfo', employeeid: uid });

          // 用户并不存在
          if (!userInfo.value.employeeid) {
            return ElNotification({ title: '错误', message: '用户不存在', type: 'error', duration: 0, });
          }

          const { factorycode, factoryid, employeeid } = userInfo.value;

          //装配厂
          const allowedFacotrys = ['603'];
          if (allowedFacotrys.filter(i => i === factorycode).length === 0) {
            return ElNotification({ title: '错误', message: '当前分厂暂不能使用该功能', type: 'error', duration: 0, });
          }
          //查询组下拉数据
          const config = {
            url: `${ZSdispatchAPI}?action=InitpageData`,
          };

          const { tdata } = await commonFetch(config);
          teamSelectList.value = tdata.value === null ? [] : Array.from(tdata.value);

        })

        // 返回给页面使用的数据
        return {
          currentTime,//当前时间
          tabfirst,
          clientHeight, inputHeight, tableHeight,
          main,
          formData,
          containerTableRef,
          queryDispatchData,//查询派工数据(方法)
          containerList,//查询报工数据
          selectContainerRow,//任务单表格行点击事件（查询工序数据）
          currentContainerRow,
          specTableRef,
          stepTableRef,
          specList,//工序数据
          selectSpecChange,//工序勾选变动事件（查询工步信息）
          stepList,//工步数据
          teamWrok,//----------人员信息对象
          teamSelectList,//组下拉数据
          workSelectList,//员工下拉数据
          employeeList,//员工数据
          employeeListRef,//
          addOtherTeamWork,//添加员工信息
          selectStepRow,
          teamSelectChange,
          dispatchObj,//派工时间对象
          handleShiftTeamDispatch,//【派工按钮】

          handleLookProgress,//【查看准备进度】按钮方法
          lookProgress,//查看准备进度对象集

          handleDocumentViewClick,//【文档查看】按钮点击
          handleNodeClick,//【文档查看】- 文档查看节点点击
          handleOpenDocumentClick,//【文档查看】-【查看文档】按钮点击
          documentViewDialogVisible,//文档查看弹出框
          treeData,//文档查看Tree数据
          documentList,//文档查看文件清单

          splitDate,
          dateFormatter,
          userInfo,//当前用户信息
          qureyReset,
        }
      }
    };
    const app = createApp(App);
    app.use(ElementPlus, {
      locale: ElementPlusLocaleZhCn,
      //size: 'normal'
    });
    // 注册所有icon
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      switch (key) {
        case "View":
          app.component('icon-view', component)
          break;
        case "Menu":
          app.component('icon-menu', component)
          break;
        default:
          app.component(key, component)
          break;
      }
    }

    app.mount('#app');
  </script>
</body>

</html>